// 1. 导入 useUserStore
import { useUserStore } from "@/stores/user"
// 2. 导入 DirectiveBinding ts 类型
import { DirectiveBinding } from "vue"

/**
 * 4. 执行函数 拿到 自定义指令的 el 和 bindings，和 userStore里的用户数据对比
 * @param el html 元素
 * @param bindings 指令传入的参数
 */
function checkPermmision(el: HTMLElement, bindings: DirectiveBinding) {
  // 5. 获取 表达式 值
  const { value } = bindings
  // 6. 使用 userStore 获取 里的用户数据
  const store = useUserStore()
  // 7. 获取 角色 name 数组
  const roles = computed(() => store.state.roles.map((role) => role.name))

  if (value && Array.isArray(value)) {
    const hasPermision = roles.value.some((item) => value.includes(item))
    // 8. 判断 指令的 值， 是否 ，包含在 角色里
    if (!hasPermision) {
      /* 
      9. 指令的 值，不包含在 角色里，通过他的父级删除他自己

      注意：
      权限指令不是动态的， 删除后回不来了，权限变了，不会再显示，除非刷新页面

      非要的话，可以考虑 v-if ,来实现 
      */
      el.parentNode?.removeChild(el)
    }
  } else {
    // 10. 如果用户 没角色权限 直接报错
    throw new Error("请提供权限")
  }
}
/**
 * 3. 指令如果写成一个函数 他默认就是 在 组件 mounted 和 updated 生命周期中 执行
 *
 * @param el html 元素
 * @param bindings 指令传入的参数
 */
const permission = (el: HTMLElement, bindings: DirectiveBinding) => {
  // 4. 执行函数 拿到 自定义指令的 el 和 bindings，和 userStore里的用户数据对比
  checkPermmision(el, bindings)
}
export default permission
